<template>
  <ele-page>
    <!-- 搜索表单 -->
    <etpEmployeeDevices-search @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table ref="tableRef" row-key="id" :columns="columns" :datasource="datasource"
        :show-overflow-tooltip="true" v-model:selections="selections" :highlight-current-row="true"
        :export-config="{ fileName: '设备管理' }" cache-key="etpEtpEmployeeDevicesTable">
        <template #toolbar>
          <el-button v-permission="'etp:etpEmployeeDevices:add'" type="primary" class="ele-btn-icon"
            :icon="PlusOutlined" @click="openEdit()">
            新建
          </el-button>
          <el-button v-permission="'etp:etpEmployeeDevices:remove'" type="danger" class="ele-btn-icon"
            :icon="DeleteOutlined" @click="removeBatch()">
            删除
          </el-button>
          <el-button v-permission="'etp:etpEmployeeDevices:export'" class="ele-btn-icon" :icon="DownloadOutlined"
            @click="exportData">
            导出
          </el-button>
        </template>
        <template #action="{ row }">
          <el-link v-permission="'etp:etpEmployeeDevices:edit'" type="primary" underline="never" @click="openEdit(row)">
            修改
          </el-link>
          <el-divider v-permission="['etp:etpEmployeeDevices:edit', 'etp:etpEmployeeDevices:remove']"
            direction="vertical" />
          <el-link v-permission="'etp:etpEmployeeDevices:remove'" type="danger" underline="never"
            @click="removeBatch(row)">
            删除
          </el-link>
          <el-divider v-permission="['etp:etpEmployeeDevices:edit', 'etp:etpEmployeeDevices:remove']"
          direction="vertical" />
          <el-link v-permission="'etp:etpEmployeeDevices:remove'" type="primary" underline="never"
            @click="removeBatch(row)">
            开启录音
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <etpEmployeeDevices-edit v-model="showEdit" :data="current" @done="reload" />
  </ele-page>
</template>

<script setup>
import { ref } from 'vue';
import {
  PlusOutlined,
  DeleteOutlined,
  DownloadOutlined
} from '@/components/icons';
import { ElMessageBox } from 'element-plus';
import { EleMessage } from 'ele-admin-plus';
import EtpEmployeeDevicesSearch from './components/etpEmployeeDevices-search.vue';
import EtpEmployeeDevicesEdit from './components/etpEmployeeDevices-edit.vue';
import { pageEtpEmployeeDevicess, removeEtpEmployeeDevicess, exportEtpEmployeeDevicess } from '@/api/etp/etpEmployeeDevices';

defineOptions({ name: 'EtpEtpEmployeeDevices' });

/** 表格实例 */
const tableRef = ref(null);

/** 表格列配置 */
const columns = ref([
  // {
  //   type: 'selection',
  //   columnKey: 'selection',
  //   width: 50,
  //   align: 'center',
  //   fixed: 'left'
  // },
  // {
  //   type: 'index',
  //   columnKey: 'index',
  //   width: 50,
  //   align: 'center',
  //   fixed: 'left'
  // },
  {
    prop: 'employeeName',
    label: '员工名称',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'deviceId',
    label: '设备号',
    align: 'center',
    minWidth: 110
  },
  // {
  //   prop: 'deviceVersion',
  //   label: '设备版本号',
  //   align: 'center',
  //   minWidth: 110
  // },
  {
    prop: 'batteryLevel',
    label: '电量',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'deptId',
    label: '所属门店',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'lastHeartbeat',
    label: '最近心跳',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'isOnline',
    label: '是否在线',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'status',
    label: '状态',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'pendingUpload',
    label: '待上传文件',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'storageRemaining',
    label: '剩余存储空间(KB)',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'signalStrength',
    label: '信号值',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'totalRecordingDuration',
    label: '录音总时长(秒)',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'recordingCount',
    label: '录音次数',
    align: 'center',
    minWidth: 110
  },
  // {
  //   prop: 'createdBy',
  //   label: '创建人',
  //   align: 'center',
  //   minWidth: 110
  // },
  // {
  //   prop: 'createdTime',
  //   label: '创建时间',
  //   align: 'center',
  //   minWidth: 110
  // },
  {
    columnKey: 'action',
    label: '操作',
    width: 220,
    align: 'center',
    slot: 'action',
    hideInPrint: true,
    hideInExport: true
  }
]);

/** 表格选中数据 */
const selections = ref([]);

/** 当前编辑数据 */
const current = ref(null);

/** 是否显示编辑弹窗 */
const showEdit = ref(false);

/** 表格数据源 */
const datasource = ({ pages, where }) => {
  return pageEtpEmployeeDevicess({ ...where, ...pages });
};

/** 搜索 */
const reload = (where) => {
  tableRef.value?.reload?.({ page: 1, where });
};

/** 打开编辑弹窗 */
const openEdit = (row) => {
  current.value = row ?? null;
  showEdit.value = true;
};

/** 批量删除 */
const removeBatch = (row) => {
  const rows = row == null ? selections.value : [row];
  if (!rows.length) {
    EleMessage.error({ message: '请至少选择一条数据', plain: true });
    return;
  }
  ElMessageBox.confirm(
    `是否确认删除员工名称为"${rows.map((d) => d.employeeName).join()}"的数据项?`,
    '系统提示',
    { type: 'warning', draggable: true }
  )
    .then(() => {
      const loading = EleMessage.loading({
        message: '请求中..',
        plain: true
      });
      removeEtpEmployeeDevicess(rows.map((d) => d.id))
        .then(() => {
          loading.close();
          EleMessage.success({ message: '删除成功', plain: true });
          reload();
        })
        .catch((e) => {
          loading.close();
          EleMessage.error({ message: e.message, plain: true });
        });
    })
    .catch(() => { });
};

/** 导出数据 */
const exportData = () => {
  const loading = EleMessage.loading({
    message: '请求中..',
    plain: true
  });
  tableRef.value?.fetch?.(({ where }) => {
    exportEtpEmployeeDevicess(where)
      .then(() => {
        loading.close();
      })
      .catch((e) => {
        loading.close();
        EleMessage.error({ message: e.message, plain: true });
      });
  });
};
</script>
